<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="HtranClose2"></div>
      <div class="Htran">
        <!--<div class="rele-titles">客源转让<span @click="HtranClose2">X</span></div>-->
        <div class="rele-titles"><img @click="HtranClose2" src="../assets/img/tub.png" alt="">客源转让</div>
        <div class="Htran-tltle">
          <div class="Htran-left">客源编号：</div>
          <div class="Htran-input"><input type="" name="" v-model="formData.id"></div>
        </div>
        <div class="li-p">
          <!--<div class="Htran-li">-->
          <!--<div class="Htran-li-title">转让方</div>-->
          <!--<div class="Htran-b-li">-->
          <!--<div class="Htran-b-name">-->
          <!--委托日期-->
          <!--</div>-->
          <!--<div class="Htran-b-input">-->
          <!--<el-date-picker style="width:100%"-->
          <!--v-model="timevalue1"-->
          <!--type="date"-->
          <!--placeholder="选择日期">-->
          <!--</el-date-picker>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="Htran-b-li">-->
          <!--<div class="Htran-b-name">-->
          <!--区域-->
          <!--</div>-->
          <!--<div class="Htran-b-input">-->
          <!--<input type="" name="">-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="Htran-b-li">-->
          <!--<div class="Htran-b-name">-->
          <!--门店-->
          <!--</div>-->
          <!--<div class="Htran-b-input">-->
          <!--<input type="" name="">-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="Htran-b-li">-->
          <!--<div class="Htran-b-name">-->
          <!--小组-->
          <!--</div>-->
          <!--<div class="Htran-b-input">-->
          <!--<input type="" name="">-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="Htran-b-li">-->
          <!--<div class="Htran-b-name">-->
          <!--经纪人-->
          <!--</div>-->
          <!--<div class="Htran-b-input">-->
          <!--<input type="" name="">-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <div class="Htran-li">
            <div class="Htran-li-title">受让方</div>
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                委托日期
              </div>
              <div class="Htran-b-input">
                <el-date-picker style="width:180%;cursor: pointer;"
                                v-model="formData.entrustment_time"
                                type="date"
                                placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                区域
              </div>
              <div class="Htran-b-input">
                <select v-model="formData.region_id" style="width:180%;height: 27px;" placeholder="请选择" @change="regionchange">
                  <option
                    v-for="item in region"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                门店
              </div>
              <div class="Htran-b-input">
                <select v-model="formData.store_id" style="width:180%;height: 27px;" placeholder="请选择" @change="shopchange">
                  <option
                    v-for="item in shop"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                小组
              </div>
              <div class="Htran-b-input">
                <select v-model="formData.group_id"  style="width:180%;height: 27px;" placeholder="请选择" @change="jjrChange">
                  <option
                    v-for="item in group"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="Htran-b-li">
              <div class="Htran-b-name">
                受让人
              </div>
              <div class="Htran-b-input">
                <select v-model="formData.agent_id"  style="width:180%;height: 27px;" placeholder="请选择">
                  <option
                    v-for="item in jinjiren"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
          </div>
          <div class="btn">
            <el-button @click="HtranGo" type="primary">开始转移</el-button>
            <el-button @click="HtranClose2" type="primary">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  export default {
    props:{
      HtranClose:{
        type:Function
      },
      SetHourList:{
        type:Function
      },
      LDmodal:{
        type:Function
      }
    },
    data () {
      return {
        formData:{},
        region:[],//区域
        shop:[],//门店
        group:[],//小组
        jinjiren:[],//经纪人
      }
    },
    methods:{

      //开始转移
      HtranGo(){
        let that = this;
        that.$http.post('/newapi/Tourists/turn',that.formData).then(res=>{
          console.log(res);
          if(res.data.status === 200){
            that.HtranClose2();
            that.SetHourList();
            that.$store.state.messageString = res.data.message;
            that.LDmodal();
          }else {
            that.$store.state.messageString = res.data.message;
            that.LDmodal();
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      //关闭弹窗
      HtranClose2(){
        this.HtranClose();
        this.formData = {};
      },
      // 区域
      citychange() {
        let that = this;
        // 区域
        that.$http.get('/index/department', {params: {id: 0}})
        .then(function (res) {
          that.region = res.data
        })
        .catch(function (err) {
          console.log(err);
        })
      },
      // 设置门店列表
      regionchange(value) {
        let that = this;
        that.$http.get('/index/department', {params: {id: value}})
        .then(function (res) {
          that.shop = res.data
        })
        .catch(function (err) {
          console.log(err);
        })
      },
      //获取小组
      shopchange(value) {
        let that = this;
        that.$http.get('/index/department', {params: {id: value}})
        .then(function (res) {
          that.group = res.data
        })
        .catch(function (err) {
          console.log(err);
        })
      },

      //设置经纪人列表
      jjrChange(value){
        let that = this;
        that.$http.get('/index/department/staff_group/' + value)
        .then(function (res) {
          that.jinjiren = res.data
        })
        .catch(function (err) {
          console.log(err);
        })
      }
    },
    created(){
      this.citychange();
    }

  }
</script>
<style scoped>
  .btn{
   margin-top: 240px;
   left: 63px;
    position: relative;
  }

  .Htran-b-name{
    width: 35%;
    text-align: center;
    float: left;
    line-height: 27px;
    font-weight:bold;
  }
  .Htran-b-input{
    width: 65%;
    float: left;
  }
  .Htran-b-input input{
    border-radius: 5px;
    width: 100%;
    line-height: 27px;
    box-sizing: border-box;
    border: 1px solid  #d3d3d3;
  }
  .li-p{
    width: 94%;
    float: left;
    padding: 0 3%;
  }
  .Htran-b-li{
    margin-top: 10px;
    width: 100%;
    float: left;
  }
  .Htran-li-title{
    width: 190%;
    float: left;
    font-size: 1em;
    text-align:center;
    font-weight: bold;
  }
  .Htran-li{
    margin-top: 15px;
    width: 50%;
    float: left;
  }
  .Htran-left{
    width: 20%;
    margin-top: 18px;
    float: left;
    font-weight:bold;
  }
  .Htran-input{
    width: 80%;
    float: left;
    margin-top: 20px;
  }
  .Htran-input input{
    width: 100%;
    float: left;
    border:none;
    line-height: 27px;
    border-bottom: 1px solid  #d3d3d3;
    cursor: pointer;
  }
  .Htran-tltle{
    width: 90%;
    margin-top: 40px;
    line-height: 27px;
    font-size: 1.1em;
    float: left;
    padding: 0 5%;
  }
  .Htran{
    width: 26%;
    height: 380px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    position:absolute;
    top: 50%;
    margin-top: -180px;
    left: 37%;
    z-index: 10;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }
  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    border-radius: 10px;
    cursor: pointer;
  }
  img{
    left: 150%;
  }
  .rele-titles {
    width: 15.5%;
    /*padding: 0 0.5%;*/
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  select{
    cursor: pointer;
  }
</style>
